// 导入Vue的onMounted和onUnmounted函数
import { onMounted, onUnmounted } from 'vue'
// 导入创建右键菜单的函数
import { createContextMenu } from '@/components/context-menu/creatContextMenu'
// 导入右键菜单项的类型
import { type IContextMenuItem } from '@/components/context-menu/type'
// 导入编辑器存储模块
import useEditorStore from '@/store/modules/editorStore'
// 初始化右键菜单
const initContextMenu = () => {
  // 获取编辑器存储模块
  const editorStore = useEditorStore()

  // 定义右键菜单项
  const menuItems: IContextMenuItem[] = [
    {
      label: '复制',
      shortcut: 'Ctrl+C',
      action: () => {
        // 复制当前组件
        editorStore.copyComponentHandle(editorStore.currentComponentId)
      },
    },
    {
      label: '粘贴',
      shortcut: 'Ctrl+V',
      action: () => {
        // 粘贴组件
        editorStore.pasteComponent()
      },
    },
    {
      label: '删除',
      shortcut: 'Delete',
      action: () => {
        // 删除当前组件
        editorStore.deleteComponentHandle(editorStore.currentComponentId)
      },
    },
    {
      label: '取消选中',
      shortcut: 'Esc',
      action: () => {
        // 取消选中当前组件
        editorStore.setActiveComponent('')
      },
    },
  ]
  // 定义销毁右键菜单的函数
  let distroyContextMenu: () => void
  // 在组件挂载时创建右键菜单
  onMounted(() => {
    distroyContextMenu = createContextMenu(menuItems)
  })
  // 在组件卸载时销毁右键菜单
  onUnmounted(() => {
    distroyContextMenu?.()
  })
}

// 导出初始化右键菜单的函数
export default initContextMenu
